<template>
  <div>
    <alert v-model="alertShow.showmsg" :title="'提示'" @on-show="onShow" @on-hide="onHide">{{alertShow.msg}}</alert>
    <alert v-model="alertTel.showmsg" :title="'手机绑定'" @on-show="onTelShow" @on-hide="onTelHide">{{alertTel.msg}}</alert>
    <div :style="boxStyle" >
      <div style="margin-bottom: 60px;">
        <swiper :list="demoList" :height=imgHw :auto="true" dots-position="center"></swiper>
        <flexbox  :gutter="0" wrap="wrap" style="background-color: #ffffff;padding-top: 10px;">
          <flexbox-item :span="9">
            <div style="padding-left: 10px">
              <p style="font-size: 14px;padding-left: 1px">{{shopInfoData.name}}</p>
              <p style="font-size: 14px;text-align:left;color: #fa0000;margin-top: -3px;">{{shopInfoData.pointPrice}}积分</p>
            </div>
          </flexbox-item>
          <flexbox-item :span="3">
          </flexbox-item>
        </flexbox>
        <div style="padding-top: 10px;font-size: 0;padding-bottom: 10px">
          <img src="../../../../src/assets/images/shopMall/banner_ppcl@2x.png" width="100%">
        </div>
        <div style="background-color: #ffffff;height: 40px;color: #444444"><b style="padding-top: 10px;padding-left: 10px;font-size: 14px">商品介绍</b></div>
        <flexbox  :gutter="0" wrap="wrap" style="background-color: #ffffff;padding-top: 10px;padding-bottom: 10px;border-top: 1px solid #D9D9D9" v-for="item in valList">
          <flexbox-item :span="3">
            <b style="font-size: 14px;padding-left: 10px;color: #636363">{{item.label}}</b>
          </flexbox-item>
          <flexbox-item :span="9">
            <p style="font-size: 14px;color: #636363">{{item.value}}</p>
          </flexbox-item>
        </flexbox>
        <div style="border-top: 1px solid #D9D9D9;">
          <img v-for="item in shopInfoData.itemDetailImg"  :src="item" style="width:100%;display:block">
        </div>
      </div>
    </div>
    <div>
      <tab :animate="false" style="height: 40px;border-top: 1px solid #aaa9a9">
        <tab-item @click.native="shopmainFn">
          <div style="display: inline-block;padding-top: 4px;">
            <img src="../../../../src/assets/images/shopMall/shopMain.png" width="24px" height="24px">
          </div>
        </tab-item>
        <tab-item @click.native="buyShopFn" style="background-color: #f95320;color: #ffffff;">
          <p style="margin-top: -3px">立即兑换</p>
        </tab-item>
      </tab>
    </div>
  </div>
</template>
<script>
  import { Swiper, Flexbox, FlexboxItem, XButton, Group, Scroller, FormPreview, Alert, Tab, TabItem, XHeader, XInput } from 'vux'
  import * as urls from '../../../api/urls'
  import * as types from '../../../store/types'
  import {API_ROOT} from '../../../config.js'
  import $ from 'jquery'

  export default {
    components: {
      Swiper,
      Flexbox,
      FlexboxItem,
      XButton,
      Group,
      Scroller,
      FormPreview,
      Alert,
      Tab,
      TabItem,
      XHeader,
      XInput
    },
    mounted: function () {
      document.getElementsByClassName('weui_tabbar')[0].style.display = 'none'
      document.getElementsByClassName('weui_tab_bd')[0].style.paddingBottom = '0'
      window.sessionStorage.setItem('telLuck', '1')
      let width = document.body.clientWidth
      let heigth = (parseInt(width) / 100) * 65
      this.imgHw = heigth + 'px'
      this.shopId = window.sessionStorage.getItem('shopId')
      document.getElementsByClassName('weui_tab_bd')[0].style.overflowY = 'hidden'
      let clientHeight = parseInt(document.body.clientHeight)
      this.boxStyle = 'overflow-x: hidden;overflow-y: auto;height: ' + (clientHeight - 38) + 'px'
      if (window.sessionStorage.getItem('userId') === '' || window.sessionStorage.getItem('userId') === null || window.sessionStorage.getItem('userId') === undefined) {
        let userId = window.location.href.replace(/.*userId=(\w*)&?.*/, '$1')
        let id = window.location.href.replace(/.*id=(\w*)&?.*/, '$1')
        this.userId = userId
        this.shopId = id
        if (this.userId !== '' && this.userId !== null && this.userId !== undefined) {
          window.sessionStorage.setItem('userId', this.userId)
          window.sessionStorage.setItem('shopId', id)
          this.getInfoList()
//          this.$wechat.showOptionMenu()
        } else {
          let url = window.location.origin
          window.location.href = url + '/api/wxAuth/index?type=t1'
        }
      } else {
        this.shopId = window.sessionStorage.getItem('shopId')
        this.userId = window.sessionStorage.getItem('userId')
        window.sessionStorage.setItem('userId', this.userId)
        this.getInfoList()
      }
    },
    data () {
      return {
        alertShow: {
          showmsg: false,
          msg: ''
        },
        alertTel: {
          showmsg: false,
          msg: ''
        },
        boxStyle: 'height: 300px;overflow-x: hidden;overflow-y: auto;',
        shopInfoData: {
          pointPrice: '',
          likeCount: '',
          desc: '',
          name: '',
          itemDetailImg: '',
          like: false,
          infoImage: ''
        },
        imgHw: '',
        shopHeigth: '',
        shopId: '',
        valList: [],
        demoList: []
      }
    },
    methods: {
      shopmainFn () {
        window.location.href = '/api/wxAuth/go/content+shoppingMall+ShoppingMall'
      },
      weixinfn42 () {
        let that = this
        let userId = window.sessionStorage.getItem('userId')
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t72' + '&uid=' + userId + '&id=' + that.shopId

        that.$wechat.ready(function () {
          that.$wechat.onMenuShareAppMessage({
            title: '孝行通-' + that.shopInfoData.name, // 分享标题
            desc: that.shopInfoData.desc, // 分享描述
            link: link, // 分享链接
            imgUrl: that.shopInfoData.infoImage, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
          })
          that.$wechat.onMenuShareTimeline({
            title: '孝行通-' + that.shopInfoData.name, // 分享标题
            link: link, // 分享链接
            imgUrl: that.shopInfoData.infoImage, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
          })
        })
        $.ajax({
          url: API_ROOT + '/api/wxAuth/jsauth?url=' + encodeURIComponent(url + '/static/index.html'),
          type: 'post',
          success: function (t) {
            if (t.status === 100) {
              let sign = t.data.sign
              let weixinConfig42 = {
                debug: false,
                appId: sign.appId,
                timestamp: sign.timeStamp,
                nonceStr: sign.nonceStr,
                signature: sign.signature,
                jsApiList: ['onMenuShareAppMessage', 'chooseWXPay', 'onMenuShareTimeline']
              }
              // 授权
              that.$wechat.config(weixinConfig42)
              // 调用ready初始化
            } else {
              that.weixinfn42()
            }
          },
          error: function (t) {
            that.weixinfn42()
          }
        })
      },
      getInfoList () {
        let userId = window.sessionStorage.getItem('userId')
        let that = this
        this.http(urls.shopDetail, {userId: userId, id: that.shopId}, function (res) {
          if (res.status === 100) {
            that.shopInfoData.name = res.data.item.name
            that.shopInfoData.desc = res.data.item.desc
            that.shopInfoData.infoImage = res.data.item.infoImage
            that.shopInfoData.likeCount = res.data.item.likeCount
            that.shopInfoData.pointPrice = res.data.item.pointPrice
            that.shopInfoData.itemDetailImg = res.data.item.itemDetailImg
            that.shopInfoData.like = res.data.item.like
            if (res.data.item.itemBannerImg.length !== 0) {
              for (let i = 0; i < res.data.item.itemBannerImg.length; i++) {
                let bannerObj = {}
                bannerObj.img = res.data.item.itemBannerImg[i]
                that.demoList.push(bannerObj)
              }
            }
            if (res.data.item.propertis.length !== 0) {
              for (let i = 0; i < res.data.item.propertis.length; i++) {
                let valObj = {}
                valObj.label = res.data.item.propertis[i].name
                valObj.value = res.data.item.propertis[i].value
                that.valList.push(valObj)
              }
            }
            that.weixinfn42()
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      collectionFn () {
        let userId = window.sessionStorage.getItem('userId')
        let that = this
        this.http(urls.shopLike, {userId: userId, itemId: parseInt(that.shopId)}, function (res) {
          if (res.status === 100) {
            that.shopInfoData.like = true
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      buyShopFn () {
        let that = this
        let itemId = parseInt(this.shopId)
        let userId = window.sessionStorage.getItem('userId')

        that.http(urls.userIndex, {userId: userId}, function (res) {
          if (res.status === 100) {
            if (res.data.user.tel !== '' && res.data.user.tel !== null && res.data.user.tel !== undefined) {
              that.$store.commit(types.EMPOWER, {isPointBuy: 1})
              that.$store.commit(types.EMPOWER, {addressLuckType: true})
              that.$router.push({
                path: '/shoppingCar/SelectAddress',
                query: {
                  itemId: itemId
                }
              })
              that.$router.go(1)
            } else {
              that.alertTel.showmsg = true
              that.alertTel.msg = '请先绑定手机号'
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      onShow () {
        // 弹窗出现时触发
      },
      onHide () {
        // 弹窗关闭时触发
      },
      onTelShow () {
        // 手机未绑定弹窗出现时触发
      },
      onTelHide () {
        // 手机未绑定弹窗关闭时触发
        window.sessionStorage.setItem('telLuck', '5')
        this.$router.push({
          path: '/UserInformation'
        })
        this.$router.go(1)
      }
    }
  }
</script>
<style>
  .table_text{
    border-left: 1px solid #d9d9d9;
    height: 40px
  }
  .table_text_tr{
    float: left;
    padding: 10px
  }
</style>
